<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    let span1 = $("div span");
    // alert(span1.length);

    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let span2= $("div > span");
    // alert(span2.length);

    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let p1 = $("div + p");
    // alert(p1.length);

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    let p2 = $("div ~ p");
    alert(p2.length);

</script>
</html>